<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        // 表单需要了解两个地方：
        //  1- 如何收集表单数据
        //  2- 如何设置表单初始值
        // defaultValue在第一次加载时提供的值
        const root = ReactDOM.createRoot(document.getElementById("root"));
        const {createRef} = React;
        class App extends React.Component{
            //初始数据
            dataInit = {
                userName:'zhangsan',
                password:123456,
                city:'2',
                sex:'1',
                hobby:['1','3']
            }
            myForm = {
                userName:createRef(),
                passWord:createRef(),
                city:createRef(),
                sex:[createRef(),createRef()],
                hobby:[createRef(),createRef(),createRef(),createRef()]
            }
            submitHandler(e){
                e.preventDefault();
                console.log('用户名',this.myForm.userName.current.value)
                console.log('密码',this.myForm.passWord.current.value)
                console.log('城市',this.myForm.city.current.value)
                console.log('性别',this.myForm.sex.find(v=>v.current.checked).current.value)
                console.log('爱好',this.myForm.hobby.filter(v=>v.current.checked).map(v=>v.current.value))
            }
            render(){
                return (
                    <form onSubmit = {this.submitHandler.bind(this)}>
                            <p>用户名:<input type = 'text' ref={this.myForm.userName} defaultValue={this.dataInit.userName} /></p>
                            <p>密码:<input type = 'passWord' ref={this.myForm.passWord} defaultValue={this.dataInit.passWord} /></p>
                            <p>
                                所在城市：
                                <select name = "city" ref={this.myForm.city} defaultValue={this.dataInit.city}>
                                    <option value = "1">北京</option>
                                    <option value = "2">上海</option>
                                    <option value = "3">武汉</option>
                                    <option value = "4">西安</option>
                                    <option value = "5">深圳</option>
                                    <option value = "6">南白滩</option>
                                </select>
                            </p>
                            <p>
                                性别：
                                <input type="radio" ref={this.myForm.sex[0]} defaultChecked={this.dataInit.sex==="1"} name={"sex"} value={1}/>男
                                <input type="radio" ref={this.myForm.sex[1]} defaultChecked={this.dataInit.sex==="2"} name={"sex"} value={2}/>女
                            </p>
                            <p>
                                爱好：
                                <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[0]}  defaultChecked={this.dataInit.hobby.includes("1")} value={1}/>唱
                                <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[1]}  defaultChecked={this.dataInit.hobby.includes("2")} value={2}/>跳
                                <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[2]}  defaultChecked={this.dataInit.hobby.includes("3")} value={3}/>rap
                                <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[3]}  defaultChecked={this.dataInit.hobby.includes("4")} value={4}/>篮球
                            </p>
                            <button>提交</button>
                    </form>
                )
            }
        }
        root.render(<App/>)
    </script>
</body>

</html>